<!--  -->
<template>
    <view class="">
        <view class="form">
            <view class="form_item">
                <view class="form_label">单元</view>
                <view class="select" @click="openPicker(1)">
                    <view>{{ form.xt }}</view>
                    <u-icon name="arrow-down"></u-icon>
                </view>
            </view>
            <view class="form_item">
                <view class="form_label">设备</view>
                <view class="select" @click="openPicker(2)">
                    <view>{{ form.sb }}</view>
                    <u-icon name="arrow-down"></u-icon>
                </view>
            </view>
            <view class="form_item">
                <view class="form_label">时间</view>
                <uni-datetime-picker
                    v-model="datetimerange"
                    type="datetimerange"
                    @change="timeChange"
                >
                    <view class="select time">
                        <view>{{
                            $u.timeFormat(form.s_time, "yyyy-mm-dd hh:MM:ss")
                        }}</view>
                        <view>至</view>
                        <view>{{
                            $u.timeFormat(form.e_time, "yyyy-mm-dd hh:MM:ss")
                        }}</view>
                    </view>
                </uni-datetime-picker>
            </view>
        </view>
        <view class="tabs">
            <view
                v-for="(item, index) in tabs"
                :key="index"
                class="tab-item"
                :class="{ active: currentTab === index }"
                @click="switchTab(index)"
            >
                {{ item }}
            </view>
        </view>
        <view class="charts-box">
            <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
        </view>
        <u-picker
            :show="showPicker"
            :columns="columns"
            keyName="name"
            @close="pickerClose"
            @confirm="confirm"
        ></u-picker>
    </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            datetimerange: [],
            currentTab: 0,
            tabs: ["实时值", "最高值", "最低值", "平均值"],
            chartData: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts: {
                background: "rgba(255, 255, 255, 0)",
                color: [
                    "#1890FF",
                    "#91CB74",
                    "#FAC858",
                    "#EE6666",
                    "#73C0DE",
                    "#3CA272",
                    "#FC8452",
                    "#9A60B4",
                    "#ea7ccc",
                ],
                padding: [20, 20, 0, 20],
                dataLabel: false,
                dataPointShape: false,
                enableScroll: true,
                touchEvent: true,
                legend: {},
                xAxis: {
                    disableGrid: true,
                    itemCount: 4,
                    scrollShow: true,
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2,
                    data: [
                        {
                            min: 0,
                            max: 150,
                        },
                    ],
                },

                touch: {
                    pan: true,
                    zoom: true,
                },
            },
            showPicker: false,
            columns: [],
            xt_list: [
                {
                    name: "监控系统测试",
                    code: "编号 95",
                    gs_code: "公司编号 77",
                    zkid: "主控ID 1",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "灌溉系统",
                    code: "编号 142",
                    gs_code: "公司编号 17",
                    zkid: "主控ID 2",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "环境监测系统",
                    code: "编号 15",
                    gs_code: "公司编号 23",
                    zkid: "主控ID 3",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "虫情监测系统",
                    code: "编号 42",
                    gs_code: "公司编号 61",
                    zkid: "主控ID 4",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "土壤舆情",
                    code: "编号 41",
                    gs_code: "公司编号 22",
                    zkid: "主控ID 5",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "野生动物监测系统",
                    code: "编号 141",
                    gs_code: "公司编号 212",
                    zkid: "主控ID 6",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "水肥一体化系统",
                    code: "编号 51",
                    gs_code: "公司编号 32",
                    zkid: "主控ID 6",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
                {
                    name: "舆情系统",
                    code: "编号 63",
                    gs_code: "公司编号 54",
                    zkid: "主控ID 7",
                    sbzs: "22",
                    yxsb: "12",
                    dxsb: "12",
                },
            ],
            xt_c_list: [
                {
                    name: "土壤湿度",
                    data: "55.4%",
                    p_name: "监控系统测试",
                },
                {
                    name: "电导率",
                    data: "125.0uS/cm",
                    p_name: "监控系统测试",
                },
                {
                    name: "pH值",
                    data: "53.4",
                    p_name: "监控系统测试",
                },
                {
                    name: "氮离子",
                    data: "63.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "磷离子",
                    data: "52.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "钾离子",
                    data: "12.0mg/KG",
                    p_name: "监控系统测试",
                },
                {
                    name: "盐分",
                    data: "74.0mg/L",
                    p_name: "监控系统测试",
                },
            ],
            form: {
                xt: "监控系统测试",
                sb: "土壤湿度",
                s_time: "",
                e_time: "",
            },
            type: 1,
        };
    },
    onLoad(options) {
        const yesterday23Timestamp = new Date();
        yesterday23Timestamp.setDate(yesterday23Timestamp.getDate() - 1);
        yesterday23Timestamp.setHours(23, 0, 0, 0);
        const timestamp = yesterday23Timestamp.getTime();
        const s_time = new Date();
        s_time.setDate(s_time.getDate() - 7);
        s_time.setHours(0, 0, 0, 0);
        this.form.s_time = s_time;
        this.form.e_time = timestamp;
        this.setChartData();
    },
    //方法集合
    methods: {
        switchTab(idx) {
            this.currentTab = idx;
            this.setChartData();
        },
        getDateInfo(date1, date2) {
            // 确保输入是Date对象并设置为0时
            const d1 = new Date(date1);
            d1.setHours(0, 0, 0, 0);

            const d2 = new Date(date2);
            d2.setHours(0, 0, 0, 0);

            // 计算时间差和天数差
            const timeDiff = Math.abs(d2.getTime() - d1.getTime());
            const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

            // 获取中间日期数组
            const middleDates = [];
            const startDate = d1 < d2 ? new Date(d1) : new Date(d2);
            const endDate = d1 < d2 ? d2 : d1;

            // 添加中间的每一天
            for (let i = 1; i < dayDiff; i++) {
                const date = new Date(startDate);
                date.setDate(startDate.getDate() + i);

                middleDates.push(uni.$u.timeFormat(date, "yyyy-mm-dd"));
            }

            return {
                daysDifference: dayDiff,
                middleDates: middleDates,
                startDate: d1 < d2 ? d1 : d2,
                endDate: d1 < d2 ? d2 : d1,
            };
        },
        setChartData() {
            var res = {
                categories: [],
                series: [
                    {
                        name: "",
                        linearColor: [
                            [0, "#1890FF"],
                            [0.25, "#00B5FF"],
                            [0.5, "#00D1ED"],
                            [0.75, "#00E6BB"],
                            [1, "#90F489"],
                        ],
                        data: [],
                    },
                ],
            };
            const result = this.getDateInfo(this.form.s_time, this.form.e_time);

            for (var i = 0; i < result.middleDates.length; i++) {
                res.series[0].data.push(Math.floor(Math.random() * 100));
                res.categories.push(result.middleDates[i]);
            }
            this.$set(this, "chartData", res);
        },
        pickerClose() {
            this.showPicker = false;
        },
        timeChange(e) {
            this.$set(this.form, "s_time", e[0]);
            this.$set(this.form, "e_time", e[1]);
            this.setChartData();
        },
        openPicker(type) {
            this.type = type;
            if (type == 1) {
                this.columns = [this.xt_list];
            } else {
                this.columns = [this.xt_c_list];
            }
            this.showPicker = true;
        },
        confirm(e) {
            if (this.type == 1) {
                this.$set(this.form, "xt", e.value[0].name);
            } else if (this.type == 2) {
                this.$set(this.form, "sb", e.value[0].name);
            }
            this.showPicker = false;
            this.setChartData();
        },
    },
};
</script>
<style lang="scss" scoped>
.form {
    background-color: #fff;
    margin-top: 40rpx;
    padding: 0 40rpx 40rpx;
    .form_item {
        overflow: hidden;
        .time {
            font-size: 26rpx;
        }
    }
    .form_label {
        margin-top: 40rpx;
        position: relative;
        padding-left: 16rpx;
        font-size: 32rpx;
        color: #666;
        font-weight: 700;
        &::after {
            content: "";
            position: absolute;
            width: 3px;
            height: 32rpx;
            background-color: #1296db;

            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .select {
        background-color: #eee;
        height: 90rpx;
        border-radius: 12rpx;
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        color: #666;
        .jiantou {
            width: 40rpx;
            height: 40rpx;
        }
    }
}
.charts-box {
    margin-top: 40rpx;
    width: 100%;
    height: 540rpx;
    background-color: #fff;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
}
.tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    margin-top: 40rpx;
    height: 80rpx;
    .tab-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #666;
        transition: color 0.3s;

        &.active {
            color: #007aff;
            font-weight: bold;
        }
    }
}
</style>
